<template>
  <view class="page-container">
    <swiper class="truck-pictures" indicator-active-color="#fff" circular indicator-dots>
      <swiper-item v-for="item in list.pictureList">
        <image class="picture" mode="aspectFill" :src="item.url"></image>
      </swiper-item>
  
    </swiper>
    <view class="truck-meta">
      <uni-list :border="false">
        <uni-list-item :border="false" title="车辆编号" :rightText="list.id" />
        <uni-list-item :border="false" title="车辆号牌" :rightText="list.licensePlate" />
        <uni-list-item :border="false" title="车型" :rightText="list.truckType" />
        <uni-list-item :border="false" title="所属机构" :rightText="list.currentOrganName" />
        <uni-list-item :border="false" title="载重" :rightText="list.allowableLoad +'吨'" />
      </uni-list>
    </view>
  </view>
</template>

<script setup >
import { getDriverUsersTruckAPI } from '../../api/user'
import { ref } from "vue";


const list = ref({})
const getDriverUsersTruck = async() => {
  const { data } = await getDriverUsersTruckAPI()
list.value=data
}
getDriverUsersTruck()

</script>

<style lang="scss" scoped>
.page-container {
  padding: 30rpx;
}

.truck-pictures {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .picture {
    width: 100%;
    height: 100%;
  }
}

.truck-meta {
  border-radius: 16rpx;
  overflow: hidden;
  padding: 10rpx;
  margin-top: 20rpx;
  background-color: #fff;

  // ::v-deep .uni-list-item__content-title {
  //   color: $uni-secondary-color !important;
  // }

  // ::v-deep .uni-list-item__extra-text {
  //   color: $uni-main-color !important;
  // }
}
</style>
